<script setup lang="ts">
//
import { ref } from 'vue'
import commonList from '@/components/common-list/index'
import {
  shequAPI,
  shequListAPI,
  shequListAPI2,
  publishwenzAPI,
  gethonidanAPI,
  gethonidanxinxiAPI,
} from '@/services/shequ'
import { guanzhuStore, myStore } from '@/stores'
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
// #ifdef MP-WEIXIN
import unibadge from '../../components/uni-badge/uni-badge.vue'
import unipopup from '../../components/components/uni-popup/uni-popup.vue'

// #endif
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
const user = myStore()
// list是列表
const newslist = ref<any>([])
// 顶部滚动选项卡
const tabindex = ref(0)
const tabs = ref<any>([])

// follow
const follow = (index: number, index1: number, item) => {
  console.log(newslist.value, '关注全部')
  console.log(item, '关注全部111')
  newslist.value.map((obj) => {
    obj.list.map((obj1) => {
      if (item.toname === obj1.toname) {
        obj1.isfollow = obj1.isfollow === 'true' ? 'false' : 'true'
      }
    })
  })
}
//doSupport
const doSupport = (e) => {
  //
  let msg = e.type === 'support' ? '支持' : '不支持'
  // 如果用户已经支持了，就不能再点击   这里list报红是没有错误
  if (newslist.value[e.index1].list[e.index].support.type === e.type) return
  // 如果之前已经支持了，按了不支持，就是支持减1，不支持加一
  if (newslist.value[e.index1].list[e.index].support.type === 'support' && e.type === 'unsupport') {
    newslist.value[e.index1].list[e.index].support.support_count--
    newslist.value[e.index1].list[e.index].support.unsupport_count++
  } else if (
    newslist.value[e.index1].list[e.index].support.type === 'unsupport' &&
    e.type === 'support'
  ) {
    newslist.value[e.index1].list[e.index].support.support_count++
    newslist.value[e.index1].list[e.index].support.unsupport_count--
  } else {
    newslist.value[e.index1].list[e.index].support[e.type + '_count']++
  }
  newslist.value[e.index1].list[e.index].support.type = e.type
  // 点赞
  uni.showToast({
    title: msg + '成功',

    duration: 1000,
  })
  // list.value[e.index].support.type = e.type
  // list.value[e.index].support[e.type + '_count']++
}
//改变tabIndex
const scrollinview = ref('')
// 顶部滚动选项卡

const changeTab = (index) => {
  if (tabindex.value === index) return
  // 选项卡点击
  tabs.value[index].active = 'true'
  // 选项卡点击，tabindex要等于e.index
  tabindex.value = index
  // 滚动到指定元素

  scrollinview.value = 'item' + index
}

// 滚动条滑动
const onchangeTab = (e) => {
  changeTab(e.detail.current)
}
// 计算高度
// 默认列表高度
const listHeight = ref(600)

onLoad(async () => {
  // 提示按确认

  // 选项卡点击，tabindex要等于e.index
  // scrollinview.value = 'item' + tabindex.value
  uni.getSystemInfo({
    success: (res) => {
      console.log(res.windowHeight, '可视话高度')

      listHeight.value = res.windowHeight - uni.upx2px(201)
    },
  })
})
// 点击这个tabbar时触发，取消红点

onShow(async () => {
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  // 获取上列表数据
  let res: any = await shequListAPI()
  console.log(res, 'wwwwwwwwwwww')
  // 这个控制下拉刷新开启
  triggered.value = true
  tabs.value = res.data
  // 获取动态数据
  page.value = [2, 2, 2, 2, 2, 2]
  // 测试数据的红点

  //=============
  uni.removeTabBarBadge({
    //隐藏数字标
    index: 1, //tabbar下标
  })
  // 根据选项生成列表
  getData()
  let res1: any = await gethonidanxinxiAPI({ user: user.userinfo })
  console.log(res1, '消息红点')
  xiaoxi.value = res1.xiaoxi
})
// getdata方法
async function getData() {
  // 选项卡点击，tabindex要等于e.index
  // scrollinview.value = 'item' + tabindex.value

  let res = await shequAPI({
    user: user.userinfo,
  })

  newslist.value = res.data
  console.log(newslist.value, 'list')
}
//loadmore  触发底部滑动的函数
const flog = ref(true)
const page = ref([2, 2, 2, 2, 2, 2])
function loadmore(index) {
  let item = newslist.value[index]
  console.log(item)
  item.loadmore = '加载中'
  setTimeout(async () => {
    // 加载数据
    let res = await shequListAPI2({ index, limit: 3, page: page.value[index], user: user.userinfo })
    if (res.data[0].loadmore === '没有多余数据了' && res.data[0].list.length == 0) {
      item.loadmore = '没有数据了'
      flog.value = false

      return uni.showToast({
        title: '没有数据了',
        icon: 'error',
        duration: 1000,
      })
    }
    item.list = [...item.list, ...res.data[0].list]
    item.loadmore = '上拉加载更多'
    page.value[index]++
  }, 500)
  uni.showToast({
    title: '上拉加载更多',
    icon: 'loading',
    duration: 600,
  })
}
// 跳转聊天列表
const xiaoxi = ref(true)
function liaotian() {
  // 隐藏提示红点样式
  xiaoxi.value = false
  uni.navigateTo({
    url: '../../pagesA/socketliao/index',
  })
}
// 点击搜索栏的事件
const search1 = () => {
  uni.navigateTo({
    url: '../../pagesA/communitysearch/index',
  })
}
//跳转发表文章
const addinput = () => {
  uni.navigateTo({
    url: '../../pagesA/add-input/index',
  })
}
// 下拉
let triggered = ref<any>(true)
const xiala = () => {
  console.log('下拉')
  getData()
  page.value=[2, 2, 2, 2, 2, 2]
  // 刷新成功后提示成功刷新
  uni.showToast({
    title: '刷新成功',
    icon: 'none',
  })
  setTimeout(() => {
    triggered.value = false
  }, 1000)
  triggered.value = true
  // 需要重置
}


</script>

<template>
  <view>
    <!-- 搜索框 -->
    <view class="cu-bar search" style="background-color: #ece8e8; color: #8578d1">
      <view class="search-form round">
        <!-- 这些class可以在   src/styles/icons.scss   中找到 -->
        <text class="cuIcon-search"></text>
        <input
          v-model="keyword"
          :adjust-position="false"
          type="text"
          placeholder="搜索帖子"
          class="search-input"
          @input="onInput"
          @confirm="onConfirm"
          confirm-type="search"
          @tap="search1"
        />
      </view>
      <view class="action" id="item2">
        <view
          class="iconfont icon-fabiao daxiao animated"
          hover-class="animate__jello "
          @tap="addinput"
        ></view>
        <view class="iconfont icon-duihuakuang daxiao" @tap="liaotian">
          <!-- 消息红点 -->
          <view :class="xiaoxi ? 'weizhi' : ''"></view>
        </view>
        <!-- <button class="cu-btn icon-nvsheng  shadow-blur round" @tap="searcBlog"></button> -->
      </view>
    </view>

    <!-- 顶部滚动选项卡 -->
    <scroll-view
      scroll-x
      class="scroll-row"
      :scroll-into-view="scrollinview"
      :scroll-with-animation="true"
    >
      <view
        v-for="(item, index) in tabs"
        :key="index"
        class="scroll-row-item"
        :id="'item' + index"
        :class="tabindex === index ? 'color1' : ''"
        @tap="changeTab(index)"
      >{{ item.classname }}</view>
    </scroll-view>
    <!-- 滚动条 -->
    <swiper
      class="swiper"
      :duration="150"
      :current="tabindex"
      @change="onchangeTab"
      :style="'height:' + listHeight + 'px'"
    >
      <swiper-item v-for="(item1, index1) in newslist" :key="index1">
        <view class="swiper-item">
          <scroll-view
            scroll-y
            :style="'height:' + listHeight + 'px'"
            @scrolltolower="loadmore(index1)"
            @refresherrefresh="xiala"
            :refresher-enabled="true"
            :refresher-threshold="100"
            :refresher-triggered="triggered"
            @refresherrestore="onRestore"
            @refresherabort="onAbort"
          >
            <block v-for="(item, index) in item1.list" :key="index">
              <!-- 列表 -->
              <commonList
                :index="index"
                :item="item"
                :index1="index1"
                @follow="follow"
                @doSupport="doSupport"
                :isdetail="false"
                :isgeren="true"
              ></commonList>
              <!-- 分割线 -->
              <view style="height: 15rpx; background-color: #dbd8d8"></view>
            </block>
            <!-- 上拉加载更多 -->
            <view class="loadmore" v-if="item1.list.length > 3 && flog">
              <!-- 加载中 -->
              <text class="font">{{ item1.loadmore }}</text>
            </view>
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
.daxiao {
  // 左右间距20px
  margin-left: 15px;
  // 图标变大
  font-size: 25px;
}
.scroll-row {
  width: 100%;
  white-space: nowrap;
  height: 100rpx;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.scroll-row-item {
  display: inline-block !important;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  font-size: 35rpx;
}
.color1 {
  color: #3e3c6df2;
  //下划线变蓝
  border-bottom-width: 8rpx;
  // border-bottom-style: solid;
  border-bottom-color: rgb(229, 62, 40);

  font-weight: 700;
}

/*  */

.swiper {
  height: 1000rpx;
}
.loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  background-color: #f9f5f5;
  padding: 30rpx;
}
.font {
  font-size: 30rpx;
  color: #a9a5a0;
}
// 聊天图标的红点
.weizhi {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: red;
}
</style>
